<template>
  <div id="paicharts4"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PAicharts4",
  data() {
    return {
      chart: null,
      options: null,
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initcharts();
    });
  },

  methods: {
    initcharts() {
      this.chart = echarts.init(document.getElementById("paicharts4"));
      this.options = {
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: [
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37",
            "38",
            "39",
            "40",
            "41",
            "42",
            "43",
            "44",
            "45",
            "46",
            "47",
            "48",
            "49",
            "50",
            "51",
            "52",
            "53",
            "54",
            "55",
            "56",
            "57",
            "58",
            "59",
            "60",
          ],
          type: "category",
          boundaryGap: true,
          itemStyle: {
            borderColor: "blue",
            color: "#ffffff",
          },
          axisTick: {
            show: false,
          },
          //  boundaryGap: true,
          axisLabel: {
            interval: 0,
            formatter: function (value, index) {
              const step = 5;
              if (index % step === 0) {
                return value;
              } else {
                return "";
              }
            },
            textStyle: {
              show: true,
              color: "#fff",
              fontSize: "12",
            },
          },
          axisLine: {
            symbol: ["none", "arrow"],
            symbolSize: [10, 15],
            symbolOffset: [0, 0],
            lineStyle: {
              width: 2,
              color: "rgba(255,255,255,0.6)",
            },
          },
        },
        yAxis: {
          name: "单位人数",
          nameTextStyle: {
            color: "#fff",
            padding: [0, 0, 6, 0],
          },
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            symbolSize: [10, 15],
            symbolOffset: [0, 0],
            lineStyle: {
              width: 2,
              color: "rgba(255,255,255,0.6)",
            },
          },
          axisLabel: {
            textStyle: {
              show: true,
              color: "#fff",
              fontSize: "12",
            },
          },
        },
        grid: {
          left: "5%",
          top: "5%",
          right: "3%",
          bottom: "5%",
          containLabel: true,
        },
        series: [
          {
            data: [
              105, 272, 239, 150, 147, 319, 284, 363, 118, 221, 96, 69, 265,
              389, 337, 250, 355, 158, 133, 21, 278, 183, 130, 349, 344, 248,
              127, 75, 359, 292, 204, 233, 216, 317, 271, 174, 396, 91, 299,
              229, 261, 129, 313, 382, 241, 49, 305, 192, 169, 231, 164, 198,
              113, 303, 329, 287, 256, 324, 369, 207, 110, 153, 78, 245, 387,
              60, 280, 214, 150, 191, 237, 136, 177, 332, 269, 346, 275, 335,
              249, 297, 315, 227, 143, 188, 263, 26, 362, 377, 99, 219, 294,
              385, 122, 235, 282, 253, 224, 279, 331, 311, 201, 243, 170, 185,
              353, 258, 203, 162, 126, 213, 375, 352, 295, 309, 181, 254, 226,
              135, 368, 176, 273, 327, 307, 230, 360, 268, 374, 289, 259, 195,
              94, 286, 322, 298, 246, 167, 266, 145, 209, 139, 293, 197, 277,
              393, 172, 379, 314, 236, 156, 210, 301, 358, 304, 255, 142, 189,
              223, 264, 251, 325, 366, 290, 272, 244, 187, 234, 383, 326, 390,
              283, 357, 398, 206, 200,
            ],
            name: "",
            type: "line",
            symbol: "circle",
            smooth: true,
            symbolSize: 0, //不需要点就设置0
            lineStyle: {
              width: 2,
              type: "solid",
            },
            itemStyle: {
              borderWidth: 5,
              borderColor: "#1AC9FF",
              color: "#1AC9FF",
            },
            areaStyle: {
              color: "#F4F65B",
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(26,201,255,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(26,201,255,.1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };

      this.chart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
#paicharts4 {
  height: 160px;
  width: 400px;
}
</style> 